import React from 'react';
import Util from '../../common/util.js';
import Api from '../api/address-api.js';
import AreaBox from './area-box.js';
import Modal from '../../common/modal.js';

var scope;
export default class AddressForm extends React.Component {
    constructor(props) {
        super(props);
        scope = this;
        scope.init();
    };

    init() {
        var address = Util.storage().get('address') ? Util.storage().get('address') : Api.emptyAddress();
        var initState = {
            type: 'add',
            areaBoxIsOpen: false,
            address: address
        };
        if (address.area_id) {
            initState.type = 'mod';
        }
        document.title = initState.type == 'add' ? '新增地址' : '编辑地址';
        scope.state = initState;
    };

    consigneeInfo() {
        var array = [
            (<h2>收货人信息</h2>),
            (<div>
                <div className="f-fl area-text">收货人姓名:</div>
                <input name="name" ref="contact" value={scope.state.address.contact}
                       onChange={scope.handleAddressChange.bind(this,'contact')} type="text"/>
            </div>),
            (<div>
                <div className="f-fl area-text">手机号码:</div>
                <input name="tel" ref="tel" value={scope.state.address.tel} placeholder="请输入您的联系方式"
                       onChange={scope.handleAddressChange.bind(this,'tel')} type="number"/>
            </div>)
        ];
        return scope.ulGroup('consigneeInfo', array);
    };

    consigneeAddress() {
        var array = [
            (<h2>收货地址</h2>),
            (<div>
                <div className="f-fl area-text">所在地区:</div>
                <div className="f-fl area" onClick={scope.changeAreaBox}>
                    <div className="f-fl ">
                        {!scope.state.address.province ? '省份' : scope.state.address.province}
                        {!scope.state.address.city ? '城市' : scope.state.address.city }
                        {!scope.state.address.district ? '区县' : scope.state.address.district }
                    </div>
                    <div className="f-fr downIcon"><img src="images/down02.png" alt=""/></div>
                </div>
            </div>),
            (<div>
                <div className="f-fl area-text">详细地区:</div>
                <input ref="address" value={scope.state.address.address}
                       onChange={scope.handleAddressChange.bind(this,'address')} placeholder="请输入您的详细地址" type="text"/>
            </div>),
            (<div>
                <label>
                    <input type="checkbox" checked={scope.state.address.is_default == 1 ? true : false}
                           onChange={this.setDefault}/>
                    <span></span>
                </label>
                <div className="f-fl active">设为默认地址</div>
            </div>)
        ];
        return (
            <div>
                {scope.ulGroup('consigneeAddress', array)}
                <AreaBox type={scope.state.type} isOpen={scope.state.areaBoxIsOpen}
                         openAreaBoxCallback={scope.openAreaBoxCallback}></AreaBox>
            </div>
        );
    };

    openAreaBoxCallback(obj) {
        var address = scope.state.address;
        for (var i in obj) {
            address[i] = obj[i];
        }
        ;
        scope.setState({
            areaBoxIsOpen: scope.state.areaBoxIsOpen ? false : true,
            address: address
        });
    };

    changeAreaBox() {
        scope.setState({
            areaBoxIsOpen: scope.state.areaBoxIsOpen ? false : true
        });
    };

    setDefault() {
        var address = scope.state.address;
        address.is_default = address.is_default == 1 ? 0 : 1;
        scope.setState({address: address});
    };

    handleAddressChange(key) {
        var address = scope.state.address;
        address[key] = scope.refs[key].value;
        scope.setState({address: address});
    };

    ulGroup(className, array) {
        return (
            <ul className={className}>
                {array.map(function (doc, i) {
                    return (<li key={i}>{doc}</li>);
                })}
            </ul>
        );
    };

    button() {
        if (!scope.state.areaBoxIsOpen) {
            return <div className="btn-box">
                <div className="save-btn" onClick={scope.saveAddress}>保存</div>
            </div>
        }
    };

    saveAddress() {
        var address = scope.state.address;
        var result = Api.validate(address);
        var text;
        var data = Util.storage().get('address') ? Util.storage().get('address') : Api.emptyAddress();
        if ((address.address == data.address) && (data.address != '') && (address.area_id == data.area_id) && (address.contact == data.contact) && (address.is_default == data.is_default) && (address.tel == data.tel)) {
            text = '您没有修改,请修改后保存!';
            scope.failSaveAddress(text);
            return
        }
        if (result.key == 'success' && result.value) {
            var type = scope.state.type == 'add' ? 'post' : 'put';
            scope.successSaveAddress(type, address)
        } else {
            if (result.key == 'contact' && !result.value) {
                text = '请填写您的姓名!';
                scope.failSaveAddress(text);
            } else if (result.key == 'tel' && !result.value) {
                text = '请填写您的电话!';
                scope.failSaveAddress(text);
            } else if (result.key == 'area_id' && !result.value) {
                text = '请选择您的地区!';
                scope.failSaveAddress(text);
            } else if (result.key == 'address' && !result.value) {
                text = '请填写您的地址!';
                scope.failSaveAddress(text);
            } else if (address) {
            }
        }
    };

    successSaveAddress(type, address) {
        Modal.modal({
            isSuccess: true,
            header: '是否确认保存？',
            body: '',
            firstBtn: {
                text: '取消'
            },
            secondBtn: {
                text: '确认',
                isCallback: function () {
                    Api.saveOrUpdate(type, address, function () {
                        var page = Util.getUrlParam('page');
                        if (page) {
                            window.location.href = 'address.html?page=order&appid=' + scope.props.appId;
                        } else {
                            window.location.href = 'address.html?appid=' + scope.props.appId;
                        }

                    });
                }
            },
            lowerBody: false
        });
    }

    failSaveAddress(text) {
        Modal.modal({
            isSuccess: false,
            header: '保存失败!',
            body: text,
            centerBtn: {
                text: '确认',
                isCallback: function () {
                    Modal.close();
                }
            },
            lowerBody: false
        });
    }

    render() {
        return (
            <div className="consignee">
                {scope.consigneeInfo()}
                {scope.consigneeAddress()}
                {scope.button()}
            </div>
        );
    };
};